<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
            <el-form-item label="库房名称" prop="kfcode">
                <el-select v-model="queryParams.kfcode" placeholder="请选择库房名称" clearable style="width: 240px">
                    <el-option v-for="item in storeNameOption" :key="item.value" :label="item.label" :value="item.value"
                        style="width: 300px">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关键字" prop="keyword">
                <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable style="width: 240px"
                    maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="库房管理员" prop="kfglyid">
                <el-select v-model="queryParams.kfglyid" clearable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in userOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="记录时间" prop="jlsj">
                <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" clearable style="width: 240px">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button style="margin-left: 20px" type="primary" icon="el-icon-search"
                    @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" ref="refbut">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd"
                    v-hasPermi="['archive:warehouseManagement:TemperatureHumidity:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" @click="handlePlDelete"
                    v-hasPermi="['archive:warehouseManagement:TemperatureHumidity:delete']">批量删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" @click="handleExport"
                    v-hasPermi="['archive:warehouseManagement:TemperatureHumidity:export']">导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="el-icon-printer" @click="handlePrint"
                    v-hasPermi="['archive:warehouseManagement:TemperatureHumidity:print']">打印</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="thList" :height="tableHeight" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" type="index" :index="table_index" width="55" align="center" prop="id" />
            <el-table-column label="记录时间" prop="jlsj" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="库房" prop="kufang" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="库房管理员" prop="kfgly" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="演练（事故）情况" prop="ylqk" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="处置措施" prop="czcs" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="最终结果" prop="zzjg" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-view" @click="handleView(scope.row)"
                        v-hasPermi="['archive:warehouseManagement:TemperatureHumidity:detail']">详情</el-button>
                    <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['archive:warehouseManagement:TemperatureHumidity:edit']">修改</el-button>
                    <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['archive:warehouseManagement:TemperatureHumidity:delete']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加/修改 -->
        <el-dialog :title="title" :visible.sync="open" width="45%" append-to-body>
            <el-form ref="thForm" :model="thForm" :rules="thRules" label-width="120px" :disabled="isShowView">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="库房名称" prop="kfcode">
                            <el-select v-model="thForm.kfcode" placeholder="请选择库房名称" clearable style="width: 300px"
                                @input="changeStoreName">
                                <el-option v-for="item in storeNameOption" :key="item.value" :label="item.label"
                                    :value="item.value" style="width: 300px">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="库房管理员" prop="kfglyid">
                            <el-select v-model="thForm.kfglyid" clearable placeholder="请选择" style="width: 300px">
                                <el-option v-for="item in managerOption" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="记录时间" prop="jlsj">
                            <el-date-picker v-model="thForm.jlsj" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期时间" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="演练(事故)情况" prop="ylqk">
                            <el-input v-model="thForm.ylqk" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }"
                                placeholder="请输入演练(事故)情况" ref="textareaRef" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="处置措施" prop="czcs">
                            <el-input v-model="thForm.czcs" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }"
                                placeholder="请输入处置措施" ref="textareaRef" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="最终结果" prop="zzjg">
                            <el-input v-model="thForm.zzjg" type="textarea" :autosize="{ minRows: 2, maxRows: 8 }"
                                placeholder="请输入最终结果" ref="textareaRef" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-show="isShow" @click="submitForm">保 存</el-button>
                <el-button @click="thCancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 打印 -->
        <el-dialog title="打印" :visible.sync="printOpen" width="80%" append-to-body :before-close="printCancel">
            <div style="width: 70%; margin: 0 auto;">
                <div class="app-container" style="float: right">
                    <el-button type="danger" plain size="medium" @click="print">打印</el-button>
                    <el-button @click="printCancel">取 消</el-button>
                </div>
                <table class="custom-table" style="width:100%;">
                        <tr class="title">
                            <td :colspan="7" style="border: 0 !important;">
                                <h1 style="font-size: 28px;" class="h1">
                                    应急事件记录
                                </h1>
                            </td>
                        </tr>
                        <tr>
                            <td>序号</td>
                            <td>记录时间</td>
                            <td>库房</td>
                            <td>库房管理员</td>
                            <td  style="width:200px;">演练（事故）情况</td>
                            <td   style="width:200px;">处置措施</td>
                            <td  style="width:200px;">最终结果</td>
                        </tr>
                        <tr v-for="(item, index) in thList" :key="index">
                            <td>{{ index + 1 }}</td>
                            <td>{{ item.jlsj }}</td>
                            <td>{{ item.kufang }}</td>
                            <td>{{ item.kfgly }}</td>
                            <td>{{ item.ylqk }}</td>
                            <td>{{ item.czcs }}</td>
                            <td>{{ item.zzjg }}</td>
                        </tr>
                    
                </table>
            </div>
        </el-dialog>

    </div>
</template>
  
<script>
import estimateTableHeight from '@/mixins/estimateTableHeight'
import { userList } from "@/api/archive/warehouseManagement/warehouseInformation";
import { getStoreName, storeList } from "@/api/archive/warehouseManagement/personnelAccess";
import { addYjsj, yjsjList, getDetail, deitYjsj, deleteYjsj } from "@/api/archive/warehouseManagement/yingjishijian.js";
export default {
    name: "index",
    archive_Dicts: ['WEATHER'],
    mixins: [estimateTableHeight], // 混入方法
    data() {
        return {
            // 遮罩层
            loading: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                kfcode: undefined,
                keyword: undefined,
                kfglyid: undefined
            },
            dateRange: [],
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            thList: [],
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 弹出层表单
            thForm: {
                kfcode: undefined,
                kfglyid: undefined,
                jlsj: undefined,
                ylqk: undefined,
                czcs: undefined,
                zzjg: undefined
            },
            // 弹出层表单校验
            thRules: {
                kfcode: [
                    { required: true, message: "库房名称不能为空" }
                ],
                kfglyid: [
                    { required: true, message: "库房管理员不能为空" }
                ],
                jlsj: [
                    { required: true, message: "记录时间不能为空", trigger: "blur" }
                ],
            },
            // 是否禁用
            isShowView: false,
            // 是否展示
            isShow: true,
            // 库房管理员下拉框
            userOption: [],
            // 库房名称下拉框
            storeNameOption: [],
            // 新增库房管理员下拉框
            managerOption: [],
            // 是否显示打印弹出窗
            printOpen: false,
            // 标题
            printTitle: "温湿度记录表"
        }
    },
    created() {
        this.getList()
        this.getOption()
    },
    methods: {
        // 获取下拉框
        getOption() {
            storeList().then(response => {
                this.storeNameOption = response.rows.map(item => {
                    return {
                        value: item.storeId,
                        label: item.storeName
                    }
                })
            })

            userList().then(response => {
                this.userOption = response.rows.map(item => {
                    return {
                        value: item.userId,
                        label: item.userName
                    }
                })
            })
        },
        // 改变库房名称时 获取库房管理员下拉框
        changeStoreName() {
            this.form = {
                kfcode: this.thForm.kfcode
            }
            getStoreName(this.form).then(response => {
                this.managerOption = response.rows.map(item => {
                    return {
                        value: item.userId,
                        label: item.userName
                    }
                })
            })
        },
        table_index(index) {
            return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            if (this.dateRange != null) {
                if (this.dateRange.length != 0) {
                    this.queryParams.jlsj = this.dateRange[0].toString()
                    this.queryParams.jlsj2 = this.dateRange[1].toString()
                }
            }
            this.getList();
            this.queryParams.jlsj = ""
            this.queryParams.jlsj2 = ""
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 获取表格数据
        getList() {
            this.loading = true
            yjsjList(this.queryParams).then(response => {
                this.thList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // 新增
        handleAdd() {
            this.reset()
            this.resetForm('thForm')
            this.isShowView = false
            this.isShow = true
            this.title = "新增"
            this.open = true
        },
        // 批量删除
        handlePlDelete(row) {
            const ids = row.id || this.ids;
            if (!this.multiple) {
                this.$modal.confirm('是否确认删除数据？').then(function () {
                    return deleteYjsj(ids)
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => { });
            } else {
                this.$modal.msgError("请选择要删除的数据");
            }
        },
        // 导出
        handleExport(row) {
            const ids = row.id || this.ids;
            if (ids.length != 0) {
                this.queryParams.ids = ids.toString();
            }
            this.download('/archive/yjsj/export', {
                ...this.queryParams
            }, `temperatureHumidity_${new Date().getTime()}.xlsx`)
            this.queryParams.ids = ""
        },
        // 打印
        handlePrint(row) {
            const ids = row.id || this.ids;
            if (!this.multiple) {
                this.printOpen = true;
            } else {
                this.$modal.msgError("请选择要打印的数据");
            }
        },
        printCancel() {
            this.printOpen = false
        },
        // 打印
        print() {
            $("input").each(function () {
                $(this).attr('value', $(this).val());
            });

            const tableElement = document.querySelector('.custom-table');
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            const iframeDoc = iframe.contentWindow.document;

            iframeDoc.open();
            iframeDoc.write(`
          <html>
          <head>
<!--            <title>打印表单</title>-->
            <style>
              @media print {
                .h1 {
                  font-size: 28px;
                  text-align: center;
                }

                .h3 {
                  font-size: 20px;
                  text-align: right;
                }

                .table {
                  margin-top: 5px;
                  padding: 1%;
                }
                .custom-table {
                  width: 100%; /* 设置表格宽度为100% */
                  margin: 0 auto;
                  border-collapse: collapse; /* 合并单元格边框 */
                }

                .custom-table th,
                .custom-table td {
                  align-items:center;
                  justify-content:flex-start;
                  opacity:1;
                  color:#000000;
                  letter-spacing:2px;
                  font-family:仿宋;
                  font-size:16px;
                  border: 1px solid #000; /* 设置单元格边框样式 */
                  padding: 8px; /* 设置单元格内边距 */
                  text-align: center; /* 设置单元格文本居中 */
                }
              }
            </style>
          </head>
          <body>
             ${tableElement.outerHTML}
            <script>
              window.onload = function() {
                window.print();
                window.close();
              }
            <\/script>
          </body>
          </html>
      `);
            iframeDoc.close();
        },
        // 详情
        handleView(row) {
            this.reset()
            this.resetForm('thForm')
            const id = row.id
            getDetail(id).then(response => {
                this.thForm = response.data
                this.changeStoreName();
                this.isShowView = true
                this.isShow = false
                this.title = '温湿度登记详情'
                this.open = true
            })
        },
        // 修改
        handleUpdate(row) {
            this.reset()
            this.resetForm('thForm')
            const id = row.id
            getDetail(id).then(response => {
                this.thForm = response.data
                this.changeStoreName();
                this.isShowView = false
                this.isShow = true
                this.title = "修改"
                this.open = true
            })
        },
        // 删除
        handleDelete(row) {
            const id = row.id
            this.$modal.confirm('是否确认删除数据？').then(function () {
                return deleteYjsj(id)
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        // 保存
        submitForm() {
            this.$refs["thForm"].validate(valid => {
                if (valid) {
                    if (this.thForm.id != undefined) {
                        const arr = this.storeNameOption.filter(item => item.value == this.thForm.kfcode)
                        this.thForm.kufang = arr[0].label
                        const arr1 = this.userOption.filter(item => item.value == this.thForm.kfglyid)
                        this.thForm.kfgly = arr1[0].label
                        deitYjsj(this.thForm).then(resposne => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.managerOption = []
                            this.getList();
                        })
                    } else {
                        const arr = this.storeNameOption.filter(item => item.value == this.thForm.kfcode)
                        this.thForm.kufang = arr[0].label;
                        const arr1 = this.userOption.filter(item => item.value == this.thForm.kfglyid)
                        this.thForm.kfgly = arr1[0].label
                        addYjsj(this.thForm).then(request => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.managerOption = []
                            this.getList();
                        })
                    }
                }
            })
        },
        // 弹窗取消
        thCancel() {
            this.open = false
        },
        // 重置表单
        reset() {
            this.thForm = {
                storeId: undefined,
                manager: undefined,
                recordingTime: undefined,
                temperature: undefined,
                humidity: undefined,
                weather: undefined,
                measures: undefined
            }

        },
    }
}
</script>
  
<style lang="scss" scoped>
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

.h1 {
    font-size: 28px;
    text-align: center;
}

.h3 {
    font-size: 20px;
    text-align: right;
}

.table {
    margin-top: 5px;
    padding: 1%;
}

.custom-table {
    width: 100%;
    /* 设置表格宽度为100% */
    margin: 0 auto;
    border-collapse: collapse;
    /* 合并单元格边框 */
}

.custom-table th,
.custom-table td {
    padding: 8px;
    /* 设置单元格内边距 */
    padding: 5px 5px 5px 5px;
    align-items: center;
    justify-content: flex-start;
    opacity: 1;
    color: #000000;
    letter-spacing: 2px;
    font-family: 仿宋;
    font-size: 16px;
    border: 1px solid #000;
    /* 设置单元格边框样式 */
    padding: 8px;
    /* 设置单元格内边距 */
    text-align: center;
    /* 设置单元格文本居中 */
}

.title {
    heigth: 5em;
    line-height: 5em;
    text-align: center;
    padding: 5px 5px 5px 5px;
    align-items: center;
    justify-content: center;
    letter-spacing: 4px;
    font-weight: bold;
    font-family: 宋体;
    font-size: 24px;
    opacity: 1;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0) !important;
    border: 0 !important;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) !important;
}
</style>
  